<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>
</head>
<body>
    <h3>Logging</h3>
    <p id="log"></p>
    <button id="background">Execute</button>
    <script type="text/javascript">
        $(document).ready(function () {
            namespace = '/task';
            socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
            socket.on('hostadd', function(msg){
                console.log(msg.sid);
                $.ajax({
                    url: "{{ url_for('set_uid') }}",
                    data: JSON.stringify({ sid: msg.sid }),
                    type: 'post',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8"
                })
            });
            socket.on('info', function (msg) {
                console.log('Recived: ' + msg.data);
                var t = new Date(msg.time);
                $('#log').append('Recived: ' + t.toLocaleTimeString() + '->' + msg.data + '<br>');

            });
            $('#background').on('click', function(){
                $.get("{{ url_for('start_background_task') }}");
            });
        });
    </script>
</body>
</html>
